<template>
    <div class="page">
        <page-header title="机构管理" subTitle="机构科室医生、目录管理"></page-header>
        <div class="page-content">


            <table-view :table-columns="tableColumns" :table-data="tableData" :page-info="pageInfo"
                :pagination="pagination" @page-number-change="pageNumberChange" @page-size-change="pageSizeChange"
                ref="dataTable" :table-loading='loading.tableLoading'>
                <div slot="search">
                    <Form :model="formValidate" :label-width="labelWidth" label-position="right" label-colon>
                        <Row :gutter="20">
                            <Col :xs="24" :sm="12" :md="6" :lg="6">
                            <FormItem label="卫生机构ID">
                                <Input v-model="formValidate.orgId" clearable></Input>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="6" :lg="6">
                            <FormItem label="卫生机构名称">
                                <Input v-model="formValidate.orgName" clearable></Input>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="6" :lg="6">
                            <FormItem label="医保机构编号">
                                <Input v-model="formValidate.ybOrgCode" clearable></Input>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="8" :md="6" :lg="6" style="text-align:right">
                            <Button type="primary" :loading="loading.tableLoading" shape="circle"
                                @click="search">查询</Button>
                            <Button type="primary" shape="circle" style="margin-left:12px"
                                @click="addModal.show = true">添加</Button>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </table-view>
        </div>

        <!-- 添加机构 -->
        <add-modal v-model="addModal.show"></add-modal>
    </div>
</template>

<script>
    import createColumns from './columns'
    import TableView from '@/components/table-view/index.vue'
    import AddModal from './addModal/index.vue'
    import errHandler from "@/libs/err-handler";
    export default {
        name: 'org_manage',
        components: {
            TableView,
            AddModal
        },
        data() {
            return {
                gutter: 20,
                labelWidth: 100,
                addModal: {
                    show: false
                },
                tableColumns: createColumns(this),
                tableData: [{
                    name: '行政区划不能为空'
                }], // 对码列表
                formValidate: { // 项目编码查询条件
                    orgId: "",
                    orgName: '',
                    ybOrgCode: ""
                },
                loading: {
                    loading: false,
                    tableLoading: false,
                },
                pagination: this.$constance.pagination,
                pageInfo: {
                    pageNumber: 1,
                    pageSize: this.$constance.pagination.pageSize,
                    total: 0,
                    totalPage: 10,
                    showTip: true
                },
            }
        },
        created() {
            this.getDataList();
        },
        methods: {
            //获取列表
            getDataList() {
                this.loading.tableLoading = true;
                let params = {
                    "conditions": {
                        "orgId": this.formValidate.orgId,
                        "orgName": this.formValidate.orgName,
                        "ybOrgCode": this.formValidate.ybOrgCode,
                    },
                    "current": this.pageInfo.pageNumber,
                    "size": this.pageInfo.pageSize,
                }
                this.$api.queryOrg(params, true).then(data => {
                    this.loading.tableLoading = false;
                    if (data.code == '1000') {
                        // 分页信息
                        this.pageInfo.pageNumber = Number(data.data.current);
                        this.pageInfo.total = Number(data.data.total);
                        this.pageInfo.totalPage = Number(data.data.pages);
                        this.pageInfo.pageSize = Number(data.data.size);
                        this.tableData = [];

                        data.data.records.forEach((item, i) => {
                            let obj = {
                                ...item,
                                "index": i + this.pageInfo.pageSize * (this.pageInfo.pageNumber -
                                    1) + 1
                            }
                            this.tableData.push(obj)
                        })
                    } else {
                        errHandler.handleResponseErr.call(this, data);
                    }
                }).catch(err => {
                    this.loading.tableLoading = false;
                    this.$msg.error.call(this, '获取机构列表数据失败');
                });
            },
            // 添加成功后刷新数据
            refresh() {
                this.search()
            },
            search(noRerefsh) {
                if (!noRerefsh) {
                    this.pageInfo.pageNumber = 1;
                }
                this.getDataList();
            },
            // 对码分页器页码改变
            pageNumberChange(pageNumber) {
                this.pageInfo.pageNumber = pageNumber;
                this.search(true);
            },
            // 对码分页器分页条数改变
            pageSizeChange(pageSize) {
                this.pageInfo.pageSize = pageSize;
                this.search();
            },
            //启用状态点击
            switchOnChange(row) {

            },
            goManage(row) {
                // this.$router.push({
                //     name: 'catalog',
                //     query: row
                // })

                    let routeData = this.$router.resolve({
                        name: "catalog",
                        query: row,
                    });
                    window.open(routeData.href, '_blank')
            }
        }
    };
</script>
<style lang="less" scoped>
    .page {
        .page-content {
            .content {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;

                .card-content {
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding: 12px 36px;

                    .name {
                        font-size: 20px;
                        margin-top: 12px;
                    }
                }
            }
        }
    }
</style>